<template>
  <div class="class" v-if="fication.length > 0">
    <div class="search-bar-wrap">
      <van-search
        placeholder="请输入搜索关键词"
        background="0,0,0,0"
        :style="{ padding: '0' }"
        @click="jump"
        shape="round"
      />
    </div>
    <div class="category-container">
      <div class="left-wrap">
        <ul class="first-list" v-for="(l, i) in fication" :key="i">
          <li
            @click="to(l.classifyName)"
            :class="{ active: active == l.classifyName }"
          >
            {{ l.classifyName }}
          </li>
        </ul>
      </div>
      <div class="right-wrap">
        <div class="category-sub" v-for="(l, i) in fication[d].banner" :key="i">
          <div class="banner-wrap">
            <div class="index-swiper banner">
              <div class="swiper-slide">
                <img :src="l.image" alt="" @click="item" />
              </div>
            </div>
          </div>
          <div
            class="second-and-third-list"
            v-for="(l, i) in fication[d].second"
            :key="i"
          >
            <h1>
              {{ l.classifyName }}
            </h1>
            <div class="list-flex-wrap">
              <div
                class="flex-item"
                v-for="(k, j) in l.third"
                :key="j"
                @click="item"
              >
                <div class="img-cover">
                  <img :src="k.image" alt="" />
                </div>
                <span class="title text-ellipsis">{{ k.classifyName }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
export default {
  data() {
    return {
      fication: [],
      d: 0,
      active: "手机数码",
    };
  },
  methods: {
    jump() {
      this.keywordUser([]);

      this.$router.push({ name: "search" });
    },
    item() {
      this.$router.push({ name: "item", params: { spuId: 1001628 } });
    },
    to(l) {
      var b = 0;
      console.log(l);
      if (l == "手机数码") {
        this.d = 0;
      } else if (l == "服饰鞋包") {
        this.d = 1;
      } else if (l == "教育文具") {
        this.d = 2;
      }
      this.active = l;
      console.log(this.d);
    },
  },
  mounted() {
    this.$ajax
      .classification(
        {}
        // { "access-control-allow-origin": "https://www.smartisan.com" }
      )
      .then((res) => {
        this.fication = res.data;
        console.log(this.fication);
        console.log(this.fication[0].second[0].classifyName);
        console.log(this.fication[0].second[0].third[0].image);
      });
  },
};
</script>


<style lang="scss" scoped>
.class {
  position: fixed;
  top: 0;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  flex-direction: column;
  .search-bar-wrap {
    box-shadow: 0 1px 0 hsl(0deg 0% 40% / 10%);
    padding: 8.33px;
  }
  .category-container {
    position: relative;
    width: 100%;
    height: 100%;
    height: calc(100% - 2.5rem);
    padding-left: 83.33px;
    .left-wrap {
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      left: 0;
      // height: 558px;
      height: 100%;
      box-shadow: 1px 0 0 hsl(0deg 0% 40% / 10%);
      padding: 28px 6.25px 0 6.25px;
      z-index: 2;
      .first-list {
        text-align: center;
        li {
          font-size: 12.5px;
          margin-bottom: 17px;
          font-weight: 700;
          box-sizing: border-box;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          -webkit-box-pack: center;
          justify-content: center;
          line-height: 20px;
          padding: 3.333px 8.3px 3px;
        }
        .active {
          color: #d44d44;
          background: #f6ebea;
          border-radius: 4px;
        }
      }
    }
    .right-wrap {
      padding-bottom: 30px;
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
      display: block;
      .category-sub {
        box-shadow: 0 1px 0 hsl(0deg 0% 40% / 10%);
        .banner-wrap {
          width: 100%;
          padding: 18.75px 0;
          box-sizing: border-box;
          .index-swiper {
            height: 101px;
            position: relative;
            background: #fff;
            box-sizing: border-box;
            .swiper-slide {
              padding: 0 13px;
              box-sizing: border-box;
              flex-shrink: 0;
              width: 100%;
              height: 100%;
              position: relative;
              transition-property: transform, -webkit-transform;
              img {
                border-radius: 13px;
                width: 100%;
                position: relative;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                cursor: pointer;
                z-index: 3;
                vertical-align: middle;
              }
            }
          }
        }
      }
    }
  }
}
.second-and-third-list {
  border-top: 1px dotted #e9e9e9;
  display: block;
  h1 {
    color: rgba(0, 0, 0, 0.8);
    font-size: 16px;
    font-weight: 700;
    line-height: 57.29px;
    margin-left: 20.83px;
  }
  .title {
    color: #333;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    margin-top: 5.25px;
  }
}
.list-flex-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start;
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
  padding: 0 8px;
  .flex-item {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 33.333%;
    flex: 0 0 33.333%;
    padding: 3.125px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
  }
  .flex-item:last-child {
    margin-bottom: 3.125px;
  }
  .img-cover {
    height: 85.54px;
    border-radius: 8px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.03);
    img {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
img {
  width: 100%;
  vertical-align: middle;
}
.text-ellipsis {
  display: inline-block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>